<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="tool">
      <div class="container">
        <div ref="toolbar" class="toolbar"></div>
      </div>
    </div>
    <!-- editor -->
    <div class="container">
      <div class="content">
        <div class="title">
          <el-input
            placeholder="请输入文章标题（5～100个字）"
            maxlength="10"
            show-word-limit
          ></el-input>
        </div>
        <div ref="editor" class="text"></div>
      </div>
      <!-- 详情-->
      <div class="view">
        <el-form :ref="blog" :model="blog" label-width="100px">
          <el-form-item label="封面&摘要">
            <div class="cover_head_img">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <img
                  v-show="false"
                  src="../../assets/images/swaper1.png"
                  width="100%"
                  alt=""
                />
              </el-upload>
              <el-input
                v-model="info"
                type="textarea"
                :autosize="{ minRows: 8, maxRows: 8 }"
                placeholder="摘要"
                maxlength="10"
                show-word-limit
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="文章标签"> </el-form-item>
          <el-form-item label="分类专题"> </el-form-item>
          <el-form-item label="文章类型">
            <el-radio-group v-model="blog.type">
              <el-radio label="1">原创</el-radio>
              <el-radio label="2">转载</el-radio>
              <el-radio label="3">翻译</el-radio>
            </el-radio-group>
            <el-input
              :v-model="blog.cover"
              v-show="blog.type === '2'"
              placeholder="请填写原文地址"
            ></el-input>
            <el-checkbox v-show="blog.type === '2'" v-model="checked"
              >原文允许转载或者本次转载已经获得原文作者授权</el-checkbox
            >
            <p class="code" v-show="blog.type === '2'">注意：转载请确认原文允许转载，或者您已经获得原文作者授权。转载文章不能设置为VIP可见。</p>
          </el-form-item>
          <el-form-item label="发布形式">
            <el-radio-group v-model="blog.resource">
              <el-radio label="1">全部可见</el-radio>
              <el-radio label="2">仅我可见</el-radio>
              <el-radio label="3">粉丝可见</el-radio>
              <el-radio label="4">VIP可见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="内容等级">
            <el-radio-group v-model="blog.resource">
              <el-radio label="">初级</el-radio>
              <el-radio label="">中级</el-radio>
              <el-radio label="">高级</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <button @click="test()">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'wangEditor',
  data() {
    return {
      editor: null,
      info: null,
      blog: {
        cover: '',
        digest: '',
        type: ''
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info = null
      }
    },
    //value为编辑框输入的内容即父组件的v-model的值
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
  },
  mounted() {
    this.initEditor()
    this.editor.txt.html(this.value)
  },
  // 销毁编辑器
  beforeDestroy() {
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    initEditor() {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      this.editor.config.uploadImgShowBase64 = false // 是否设置base64存储图片
      this.editor.config.uploadImgServer = '/api/upload/uploadImg' // 配置服务器端地址
      this.editor.config.uploadImgHeaders = {} // 自定义 header
      this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
      // this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      this.editor.config.uploadImgMaxLength = 3 // 限制一次最多上传 3 张图片
      // this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
      this.editor.config.showLinkImg = false //隐藏插入网络图片的功能
      // 设置编辑区域高度为 500px
      this.editor.config.height = 500

      // 配置菜单
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
        'fullscreen' // 全屏
      ]

      this.editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function (xhr) {
          console.log(xhr)
          // 上传之前的一些判断操作,可阻止图片上传
          /* return {
              prevent: true,
              msg: '需要提示给用户的错误信息'
            }*/
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function (xhr) {
          console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          console.log('customInsert', result)
          //insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          //我的后端接口返回的格式为{code:0,data:'url地址'}
          insertImgFn(result.data)
        }
      }
      this.editor.config.onchange = (html) => {
        this.info = html
        this.$emit('change', this.info) // 将内容同步到父组件中
      }
      // 创建富文本编辑器
      this.editor.create()
    },
    test() {
      this.$message.success(JSON.stringify(this.blog))
    }
  }
}
</script>

<style lang="less">
.code{
    color: red;
}
.app-container {
  background: #f5f6f7;
  padding-bottom: 20px;
}
.tool {
  border-bottom: 1px solid #e8e8e8;
  .toolbar {
    .w-e-toolbar {
      background: #f5f6f7;
    }
  }
}
.content {
  background: #fff;

  width: 1000px;
  margin: 0 auto;
  margin-top: 15px;
}
.title {
  width: 1000px;
  background: #fff;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #e8e8e8;
  .el-input {
    margin: 0px 50px;
    width: 900px;
  }
  .el-input__inner {
    height: 55px;

    font-size: 24px;
    outline: none;
    border: none;
  }
}
.text {
  min-height: 600px;
  margin: 20px auto;
  width: 900px;
}
.view {
  width: 1000px;
  min-height: 400px;
  background: #fff;
  margin: 0 auto;
  .el-form {
    padding: 20px 50px;
  }
  .cover_head_img {
    display: flex;
    justify-content: space-between;
  }
  .el-textarea {
    width: 400px;
    .el-input__count {
      bottom: 20px;
    }
  }
}
</style>
